<template>
    <div class="tabbar">
        <div class="tabbar_btn" v-for="(item,index) in tabbarArr" :class="{active:btnIndex==index}" :key="index" @click="btnClick(index)" >
            <div class="tabbar_img"><img :src="item.pic" alt=""></div>
            <div class="tabbar_name">{{item.name}}</div>
        </div>
        
    </div>
</template>

<script>
// 导入图片
import pic1 from '.././assets/2.png'
import pic2 from '.././assets/3.png'
import pic3 from '.././assets/1.png'
export default {
    data(){
        return{
            btnIndex:0,
            tabbarArr:[
                {pic:pic1,name:'首页'},
                {pic:pic2,name:'订单'},
                {pic:pic3,name:'我的'}
            ]
        }
    },
    methods:{
        btnClick(index){
            this.btnIndex=index;
            console.log(index);
        }
    }
}
</script>

<style lang="scss" scoped>
    .tabbar{
        width: 100%;
        height: 60px;
        position: fixed;
        bottom: 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        border-top: 1px solid #999;
        z-index: 1;
        background: white;
    }
    .tabbar .tabbar_btn{
        width: 10%;
        height: 37px;
    }
    .tabbar .tabbar_btn .tabbar_img{
        width: 20px;
        height: 20px;
        margin: auto;
    }
    .tabbar .tabbar_btn .tabbar_img img{
        width: 100%;
    }
    .tabbar .tabbar_btn .tabbar_name{
        width: 100%;
        font-size: 14px;
        text-align: center ;
    }
    .active{
        color:rgb(63, 161, 236);
    }
</style>